<template>
    <div class="contion">
        <van-nav-bar class="header">
                <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
                <p slot="title" class="title">Eartha</p>              
        </van-nav-bar>
        <!-- 内容部分 -->
        <div class="main">
             <div class="liaotian left">
                 <van-image                             
                                        :src="require('@/assets/1.png')"                                              
                                        fit="cover" 
                                        class="image"                                                                          
                 />
                 <p>这种眼霜怎么样？你觉得好吗？</p>
            </div>
            <div class="liaotian right">
                 <p>还可以，我已经用了有半年了。</p>
                 <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                 />
                
            </div> 
            <div class="liaotian left">
                 <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                 />
                 <p>好的，那你给我来一瓶吧。</p>
            </div> 
            <div class="liaotian right">
                 <p>OK~.~</p>
                 <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                 />
                
            </div>                  
        </div>
    </div>
</template>
<style lang="less">
.contion{
     // 头部下划线
    .van-hairline--bottom::after{
        border: none;
    }
    // 头部部分
    .header{       
        margin-bottom: 25px; 
        .iconzuojiantou{
                font-size: 40px;
                color: #535353;
                padding-left: 18px;
        }
        .title{
            font-size: 32px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
        }
        .iconShapes{
            font-size: 40px;
            color: #535353;
            padding-right: 18px;
        }
    }
    .main{
        padding: 0px 58px;
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .liaotian{
            padding: 33px 0px;
            display: flex;
            align-items: center;
            img{
                width: 86px;
                height: 86px;
                border-radius: 50%;
                margin-right: 20px;
            }
            p{
                width: 354px;
                font-size: 22px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #9b9b9b;
                height: 56px;
                background-color: #ffffff;
            }
        }
    }
}
</style>
